<template>
	<view class="container" style="height: 100%;background-color: #fff;">
		<view style="">
			<uni-card style="background-color: #2a2a2a; margin: 0; padding: 10px;" title="" extra="">

				<view style="position: relative;">
					<!-- <button size="mini" :disabled="false" @click="jumpto('/pages/user/edit')"
						style="position: absolute;right: 0;">修改资料</button> -->
					<image src="../../static/112.png" :disabled="false" @click="jumpto('/pages/user/edit')"
						style="position: absolute;right: 0; width: 24px; height: 24px;"></image>
					<view class="block-content" style="display: flex;">
						<view style="flex: 1" class="profile-avatar">
							<image
								:src="user.avatar == '' || user.avatar == undefined ? '/static/default_avatar.png' : user.avatar" />
						</view>
						<view style="flex: 6;">
							<view class="profile-detail">
								<view class="profile-name">
									{{user.username == '' ? '未设置' : user.username}}
								</view>
								<!-- <view style="text-align: left;" class="profile-phone">
									12000000
								</view> -->
							</view>
						</view>
					</view>
				</view>
			</uni-card>
		</view>

		<view style="display: flex; margin-top: 10px; border-bottom: 1px solid #E4E7ED; margin: 20px 10px 10px;">
			<view style=" font-size: 20px; font-weight: bold; margin-bottom: 10px;">我的订单</view>
			<view style="flex: 1;text-align: right; font-size: 14px; margin-top: 10rpx;"
				@click="approve('/pages/order/index')">全部订单</view>
		</view>
		<!-- <view style="border-bottom: 1px solid #E4E7ED; margin: 0 0 10px 10px"></view> -->

		<view style="display: flex; text-align: center; border-bottom: 1px solid #E4E7ED; margin: 15px 10px 10px;">
			<view class="profile-add">
				<image @click="orderDetail(1)" class="profile-ima" src="../../static/101.png">
					<view>待付款</view>
				</image>
			</view>

			<view class="profile-add">
				<image @click="orderDetail(10)" class="profile-ima" src="../../static/102.png">
					<view>待上门</view>
				</image>
			</view>

			<view class="profile-add">
				<image @click="orderDetail(20)" class="profile-ima" src="../../static/104.png">
					<view>待服务</view>
				</image>
			</view>

			<view class="profile-add" style="margin-bottom: 15px;">
				<image @click="orderDetail(30)" class="profile-ima" src="../../static/103.png">
					<view>已完成</view>
				</image>
			</view>
		</view>

		<!-- <view style="border-bottom: 1px solid #E4E7ED; margin: 10px 0 10px 10px"></view> -->
		<view style="display: flex;">
			<view class="profile-boder">常用功能</view>
		</view>
		<view style="border-bottom: 1px solid #E4E7ED; margin: 5px 0 0 10px"></view>

		<view class="datum">

			<navigator url="/pages/wallet/index">
				<view class="issue">我的钱包</view>
			</navigator>


			<!-- <view class="issue" @click="approve()">售后中心

			</view> -->

			<navigator url="/pages/user/worker_apply">
				<view class="issue">师傅入住</view>
			</navigator>

			<navigator v-if="user.type == 10" url="/pages/user/service_hall">
				<view class="issue">服务大厅</view>
			</navigator>

			<view class="issue" @click="showmo()">客服专线</view>

			<navigator url="/pages/guard/suggest">
				<view class="issue">意见反馈</view>
			</navigator>

			<navigator url="/pages/guard/about">
				<view class="issue">关于我们</view>
			</navigator>
		</view>
		<view class="block" style="margin-top: 30px;">
			<button
				style="width: 100%;padding: 5px 0; background-color: red; color: #FFFFFF; border-radiu; font-size: 16px;"
				@click="logout">退出登录</button><!-- 这种写法只有h5平台支持，不跨端，不推荐使用 -->
		</view>



	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';

	export default {
		data() {
			return {
				user: {
					avatar: '',
					username: '未设置',
					type: 0,
				},
			}
		},
		computed: {
			// authToken: false,
			// ...mapState(['authToken', 'user'])
		},
		onLoad() {

		},
		onShow() {
			this.user.avatar = this.$common.getUserInfo('avatar');
			this.user.username = this.$common.getUserInfo('mobile_number');
			// this.user.type = this.$common.getUserInfo('type');
			let that = this;
			this.$api.getUserType({
				uid: this.$common.getUser()
			}).then(res => {
				that.user.type = res.data.type;
			})
		},
		methods: {
			logout() {
				let that = this;
				uni.showModal({
					title: '是否退出',
					success: function(res) {
						if (res.confirm) {
							// uni.removeStorageSync('selected_baby');
							// uni.removeStorageSync('uid');
							// uni.removeStorageSync('is_login');
							uni.clearStorageSync();
							uni.redirectTo({
								url: '/pages/user/signin',
							})
							// that.$Router.push({name: '登录'});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			jumpto(url) {
				// this.$Router.push({
				// 	name: url
				// });
				uni.navigateTo({
					url: url
				})
			},
			approve(url) {
				uni.navigateTo({
					url: url
				})
			},

			showmo() {
				uni.showModal({
					title: '客服热线电话',
					content: '123353325523',
					success: function(res) {
						console.log('立即拨号')
					}
				})
			},
			orderDetail(status) {
				uni.setStorageSync('tmp_order_tab', status)
				uni.navigateTo({
					url: '/pages/order/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.update-image {
		display: inline;
		background: none;
		text-align: left !important;
	}

	.update-image:after {
		border: none !important;
		position: relative !important;
	}

	.page {
		background: rgb(242, 242, 242);
	}

	.container {
		height: inherit;
	}

	.block {
		// margin: 15px;
		background: #fff;
		// border-radius: 5px;


		.block-title {
			font-size: 18px;
			padding: 15px;
			font-weight: bold;

			.block-sub-title {
				font-size: 16px;
				font-weight: normal;
				float: right;
				color: rgb(153, 153, 153);
			}

		}

		.block-desc {
			color: rgb(153, 153, 153);
			padding: 0 15px;
			border-bottom: 1px solid rgb(153, 153, 153);
			margin: 0 15px;

		}

		.block-content {
			// padding: 15px 0 15px 15px;
			display: flex;
			align-items: center;


			&>span {
				min-width: 15%;
				height: 36px;
				margin-right: 15px;
				line-height: 36px;
			}

			&>view,
			&>uni-switch {
				//margin-left: auto;
			}

			/deep/ {
				.checklist-group {
					justify-content: center;
				}
			}

			&>.character-avatar {
				margin-left: 0;
				margin-right: 5px;

				&>image {
					height: rpx(150);
					width: rpx(150);


					.character-image {
						height: rpx(160);
						width: rpx(160);

						border-radius: 50%;

					}

					border-radius: 10px;
				}
			}
		}
	}

	.profile-avatar,
	.profile-avatar image {
		height: 66px;
		width: 66px;
		border-radius: 50%;

	}

	.method {
		padding-top: 15px;
	}

	.method-image {
		text-align: center;
		margin-bottom: 10px
	}

	.method-image image {
		height: 50px;
		width: 50px;
	}


	.profile-detail {
		flex: 1;
		padding: 5px 20px;
		display: flex;
		flex-direction: column;
		color: #FFFFFF;
	}

	.profile-phone {
		// margin-top: 10px;
		text-align: center;
		white-space: nowrap;
	}

	.profile-boder {
		font-weight: bold;
		margin: 10px;
		display: flex;
		font-size: 20px;
	}

	.head {
		font-size: 13px;
		padding: 10px;
		background-color: rgb(242, 242, 242);
	}

	.datum {
		background: #fff;
	}

	.issue {
		margin-left: 10px;
		font-size: 16px;
		padding: 10px 10px 10px 0;
		padding-top: 20px;
		border-bottom: 1px solid #E4E7ED;
	}

	.profile-ima {
		width: 30px;
		height: 30px;
		display: inline-block;
		overflow: hidden;
		position: relative;

	}

	.profile-add {
		flex: 1 1 0%;

	}
</style>
